1:介绍

ootstrap是一个基于HTML、CSS和JavaScript语言编写的框架，具有简单、灵活的特性，拥有样式库、组件和插件。

Bootstrap常用来开发响应式布局和移动设备优先的Web项目，能够帮助开发者快速搭建前端页面。

2：优点

移动设备优先：自 Bootstrap 3 起，框架包含了贯穿于整个库的移动设备优先的样式。

浏览器支持：所有的主流浏览器都支持 Bootstrap。

容易上手：只要您具备 HTML 和 CSS 的基础知识，您就可以开始学习 Bootstrap。

响应式设计：Bootstrap 的响应式 CSS 能够自适应于台式机、平板电脑和手机。

它为开发人员创建接口提供了一个简洁统一的解决方案。

它包含了功能强大的内置组件，易于定制。

它还提供了基于 Web 的定制。

它是开源的：Bootstrap 是完全开源的。代码的托管、开发和维护都在 GitHub 平台上完成。

3：引入：

4：栅格系统

介绍：栅格系统（Grid Systems），即网格系统，它是一种清晰、工整的设计风格，用固定的格子进行网页布局。栅格系统最早应用于印刷媒体上，一个印刷版面上划分了若干个格子，非常方便排版。

 后来，栅格系统被应用于网页布局中，使用响应式栅格系统进行页面布局时，可以让一个网页在不同大小的屏幕上，呈现出不同的结构。 例如，在小屏幕设备上有某些模块将按照不同的方式排列或者被隐藏。

 实现简单版栅格系统：

效果图：

5：布局容器

介绍：

容器是Bootstrap中最基本的布局元素，容器用于在其中容纳、填充一些内容，以及有时需要使内容居中。

在实现Bootstrap页面布局容器之前，需要了解设备屏幕的尺寸。

Bootstrap带有3个不同的容器，具体如下：

.container容器

它在每个响应断点处设置了一个max-width最大宽度

.container-fluid容器

它在每个响应断点处设置布局容器的宽度为100%

.container-{breakpoint}容器

它在每个响应断点处设置布局容器的宽度为100%，直到达到指定的断点为止。

每个容器中的.container-fluid和.container等类，以及每个断点之间的比较:

Bootstrap 4中的.container-fluid类是一种占据全部视口的容器。

编写HTML结构和css样式

Bootstrap 4中的.container类用于固定宽度并支持响应式布局的容器。

.container类的最大宽度根据移动端设备屏幕自动设置成100%、540px、720px、960px和1140px。

编写HTML结构

编写css样式